<template>
<div class="login_container">
  <div class='login_box'>
    <!-- 头像区域 -->
    <div class="box_img">
      <img src="../assets/logo.png" alt="the img of user">
    </div>


<el-form ref= "loginFormRef"label-width="0px" class="login_form" :model="loginForm" :rules="rules">

  <el-form-item prop="username">
    <el-input  prefix-icon="el-icon-user" v-model="loginForm.username"></el-input>
  </el-form-item>

   <el-form-item prop="password">

    <el-input  prefix-icon="el-icon-lock" v-model="loginForm.password" type="password"></el-input>
  </el-form-item>


     <el-form-item class="btns">
    <el-button type="primary" @click="login">登录</el-button>
    <el-button type="info" @click="resetLoginForm">重置</el-button>
  </el-form-item>

</el-form>
  </div>
</div>
</template>


<script>
export default {
  data() {
    return {
    loginForm:{username:"admin",password:"123456"},
    rules:{
    username:[
      {required:true,message:"请输入您的名字",trigger:'blur'},
    {min:3,max:10,message:"长度在3到10个字符之间",trigger:'blur'}
     ],
     password:[
      {required:true,message:"请输入您的密码",trigger:'blur'},
    {min:5,max:15,message:"长度在6到15个字符之间",trigger:'blur'}
     ]
  }
}
    },
    methods:{
    resetLoginForm(){
      this.$refs.loginFormRef.resetFields();
    },
    login(){
      this.$refs.loginFormRef.validate(async valid =>{
        if(!valid) return;
        const {data:res} = await this.$http.post('login',this.loginForm);
      if(res.meta.status == 400) return this.$message.error('登录失败')
      else {
        console.log(res.data.token);
         this.$message.success('登录成功');
         window.sessionStorage.setItem('token',res.data.token);
         this.$router.push('./home');
         }
      })
    }
    }
}

</script>
<style scoped>
  .login_container{
    background-color:aquamarine;
    height: 100%;
  }
  .login_box{
    width: 450px;
    height: 300px;
    background-color: white;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
  }
  .box_img{
    position: absolute;
    top:-20%;
    height:100px;
    width:100px;
    left:50%;
    transform: translateX(-50%);
    border-radius: 50%;
    padding: 10px;
    box-shadow:  0 0 10px #ddd;
    background-color: white;
  }
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
.btns{
  display: flex;
  justify-content:flex-end;
}
.login_form{
  position: absolute;
  bottom:0px;
  width:100%;
  padding:0 10px;
  box-sizing:border-box;
}
</style>
